<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="../baidujs/baidu.js"></script>
    <script type="text/javascript" src="../baidujs/modules.js"></script>
    <title>轨迹运动</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);

    var myIcon = new BMap.Icon("../baiduimages/marker_red_sprite.png", new BMap.Size(32, 70), { //小车图片
        //offset: new BMap.Size(0, -5),    //相当于CSS精灵
        imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
    });

    window.run = function () {
        var pts = []; //通过驾车实例，获得一系列点的数组
        for (var j = 0; j < 100; j++) {
            var pt = new BMap.Point(116.404, 39.915 + j * 0.001);
            pts.push(pt);
        }
        var paths = pts.length; //获得有几个点
        var polyline = new BMap.Polyline(pts, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5
        }); //创建折线
         map.addOverlay(polyline); //增加折线
        
        var carMk = new BMap.Marker(pts[0], {
            icon: myIcon
        });
        map.addOverlay(carMk);
        i = 0;

        function resetMkPoint(i) {
            carMk.setPosition(pts[i]);
            if (i < paths) {
                setTimeout(function () {
                    i++;
                    resetMkPoint(i);
                }, 100);
            }
        }
        setTimeout(function () {
            resetMkPoint(5);
        }, 100)
    }

    setTimeout(function () {
        run();
    }, 1500);
</script>